Custom Snippets Feature #2278
Custom Snippets Feature #2278
Conversation
devvaannsh
force-pushed
the
pluto/snippets
branch
from
67e1958 to
633e7cc
Compare
|
This are some more changes that are made (after rebase):
|
There was a problem hiding this comment.
Pull Request Overview
This PR introduces a Custom Snippets feature to allow users to quickly expand short abbreviations into their corresponding code templates. Key changes include new CSS rules and Less imports to style custom snippet hints, new extension modules (such as snippetsState, snippetsList, snippetCodeHints, driver, and codeHintIntegration) for managing snippet state and editor integration, and a new UI panel for displaying and managing custom snippets.
Reviewed Changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles/brackets_patterns_override.less | Adds new styles for custom snippet code hints and snippet description display |
| src/styles/brackets.less | Imports the custom snippets stylesheet |
| src/extensionsIntegrated/loader.js | Loads the new Custom Snippets extension |
| src/extensionsIntegrated/CustomSnippets/*.js | Introduces several new modules to manage snippet state, list, code hints, and integration with the editor |
| src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html | Provides the new UI panel for custom snippets |
| * @param {string} languageId - The language ID from Phoenix | ||
| * @returns {string} - The equivalent file extension for snippet matching | ||
| */ | ||
| function mapLanguageToExtension(languageId) { |
There was a problem hiding this comment.
use language = LanguageManager.getLanguageForPath(editor.document.file._path); or languageId = LanguageManager.getLanguageForPath(editor.document.file._path).getId(); to reliably get the language. this will honor users custom file type associations as well.
| .split(",") | ||
| .map((ext) => ext.trim()); | ||
|
|
||
| return supportedExtensions.some((ext) => ext === effectiveExtension); |
There was a problem hiding this comment.
these could be replaced with language check directly from languageId = LanguageManager.getLanguageForPath(editor.document.file._path).getId();
| const wrapperId = isEditForm ? "edit-desc-box-wrapper" : "desc-box-wrapper"; | ||
| const errorId = isEditForm ? "edit-description-length-error" : "description-length-error"; | ||
|
|
||
| UIHelper.showError(inputId, wrapperId, "Description cannot be more than 80 characters.", errorId); |
There was a problem hiding this comment.
move all UI strings to root/strings.js. The strings are all in English currently and not localized.
| // Register cursor activity handler for current and future editors | ||
| function registerCursorActivityForEditor(editor) { | ||
| if (editor) { | ||
| editor.on("cursorActivity", handleCursorActivity); |
There was a problem hiding this comment.
Always good to editor.off and then on to prevent event handler leaks.
… boxes are focused
…nt is properly visible
…ype accepted values
devvaannsh
force-pushed
the
pluto/snippets
branch
from
5d6e68e to
a74eb87
Compare
|
Tracking issue: #2268
This PR brings the support of Custom Snippets feature to Phoenix.
Custom snippets let users define short abbreviations. When typed in the editor, these trigger a hint. Selecting the hint expands it into the corresponding template text.
This helps reduce development time by avoiding repetitive typing.
Visual References
https://github.com/user-attachments/assets/a0a8d4f4-42d1-4c94-b2e2-4529371284c3 <- checkout this video too.
Untitled.video.-.Made.with.Clipchamp.20.mp4